<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            color: red;
        }
        .pop{
            color: purple;
        }
        .cyew{
            color: yellow;
        }
        .fz30{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p class="active">时代法国红酒看来</p>
    <button>切换</button>

    <script>
        let but = document.querySelector('button')
         let p = document.querySelector('p')

        but.onclick=function(){
            // p.setAttribute('class','pop')
            // 通过className来设置
            console.log(p.className);
            p.className='pop fz30'
            
        }

</script>
</body>
</html>